<template>
	<div class="w100 h100 page">
		<three class="three" :type="activeName" />
		<div class="flex m-between h100">
			<div class="left flex-col h100">
				<Transition name="fade-transform" mode="out-in" appear>
					<component :is="[security, hydrology, tube, microseism, fire, pressure][activeName]" :type="activeName"></component>
				</Transition>
			</div>
			<div class="right flex s-center">
				<my-tabs
					v-model="activeName"
					:tabs="[
						{ name: '安全监测', subname: 'safety monitoring', img: 'tab-1' },
						{ name: '水文监测', subname: 'hydrology', img: 'tab-2' },
						{ name: '束管监测', subname: 'Bundle tube', img: 'tab-3' },
						{ name: '微震监测', subname: 'Microseism', img: 'tab-4' },
						{ name: '区域防灭火监测 ', subname: 'Fire prevention', img: 'tab-5' },
						{ name: '顶板与冲击地压监测', subname: 'Roof and rock burst', img: 'tab-6' }
					]"
				/>
			</div>
		</div>
	</div>
</template>

<script setup name="/monitoring/Integrated">
import three from './three.vue'
import security from './left/security.vue'
import hydrology from './left/hydrology.vue'
import tube from './left/tube.vue'
import microseism from './left/microseism.vue'
import fire from './left/fire.vue'
import pressure from './left/pressure.vue'

let activeName = ref(0)
</script>

<style scoped lang="scss">
.page {
	position: relative;
	.three {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
		box-shadow: inset 0px 0px 250px 50px rgba(13, 16, 24, 0.9);
	}

	.left {
		width: 400px;
		padding: 26px 0 10px 10px;
		background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
		z-index: 2;
		box-sizing: border-box;
	}
	.right {
		background: linear-gradient(270deg, #0d1018 0%, rgba(13, 16, 24, 0) 100%);
		z-index: 2;
	}
}
</style>
